<script setup>
import { Search, Refresh, Plus, Upload, Download, Delete, UploadFilled } from '@element-plus/icons-vue';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
//导入富文本编辑器
import Editor from '../../components/Editor.vue'

//定义表单数据
const formData = ref({
    title: '',
    content: '',
})
//分页数据模型
const pagination = ref({
    currentPage: 1,//当前页码
    pageSize: 5,//每页显示的记录数
    total: 0 //总记录数
})
//定义表单实例
const formRef = ref(null)
const dialogFormVisible = ref(false)
//弹框标题
const title = ref('')
//弹出添加模态框
const handleAddModel = () => {
    dialogFormVisible.value = true
    title.value = "新建通知"
}
const rules = {
    title: [
        {
            required: true,
            message: '请输入通知标题',
            trigger: 'blur' //blur:失去焦点时触发
        }
    ],
    content: [
        {
            required: true,
            message: '请输入通知内容',
            trigger: 'blur' //blur:失去焦点时触发
        }
    ]
}




//提交表单数据
const submitForm = async () => {
    formRef.value.validate((valid) => {
        if (valid) {
            ElMessage.success("校验通过")
        } else {
            ElMessage.error("校验失败")
        }
    })
}

</script>
<template>
    <div class="notice-box">
        <!-- 操作栏部分 -->
        <el-row>
            <el-col :span="24">
                <div class="grid-content ep-bg-purple-dark">
                    <el-form :inline="true">
                        <el-form-item class="input-item" label="文章标题">
                            <el-input placeholder="请输入通知标题"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" :icon="Search">搜索</el-button>
                            <el-button plain type="primary" :icon="Refresh">重置</el-button>
                        </el-form-item>

                    </el-form>
                    <div class="btn-group">
                        <el-button type="primary" :icon="Plus" @click="handleAddModel">添加</el-button>
                        <el-button type="success" :icon="Download" @click="handleUpload">导入</el-button>
                        <el-button type="info" :icon="Upload" @click="handleExport">导出</el-button>
                        <el-button type="danger" :icon="Delete">批量删除</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!-- 数据列表部分 -->
        <el-row>
            <div class="grid-content ep-bg-purple-dark">
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="序号" width="120" type="index" />
                    <el-table-column property="username" label="通知标题" />

                    <el-table-column property="dept" label="通知内容" />

                    <el-table-column property="createTime" label="发布时间" />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="warning" plain @click="handleEdit(scope.row)">修改</el-button>
                            <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-config-provider :locale="zhCn">
                    <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
                        style="margin: 15px;" :small="small" :disabled="disabled" :background="background"
                        layout="total, prev, pager, next, jumper" :total=pagination.total @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </el-config-provider>
            </div>
        </el-row>

        <!-- 添加/编辑模态框 -->
        <el-dialog v-model="dialogFormVisible" :title="title" width="800">
            <el-form ref="formRef" :model="formData" :rules="rules">
                <el-form-item label="通知标题" prop="title">
                    <el-input v-model="formData.title" size="large" placeholder="请输入标题" />
                </el-form-item>
                <el-form-item label="通知详情" prop="content">
                   <!-- 使用富文本编辑器 -->
                    <Editor></Editor>
                </el-form-item>



            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="submitForm">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 文件上传模态框 -->
        <el-dialog v-model="uploadVisible" title="文件上传" width="500">
            <el-upload class="upload-demo" drag action="http://localhost:8080/api/import" multiple
                :on-success="importExcelSuccess" :show-file-list="false">
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    拖动文件到这里 <em>点击文件上传</em>
                </div>
                <template #tip>
                    <div class="el-upload_download" @click="handleImportTemplate">
                        <em>点击下载模板</em>
                    </div>
                </template>
            </el-upload>

        </el-dialog>
    </div>
</template>
<style scoped>
.grid-content {
    width: 99%;
    padding-bottom: 20px;
    background-color: #fff;
    margin: 5px;
}

.el-form {
    text-align: left;
}

.input-item {
    width: 250px;
    padding: 20px;
}

.el-select {
    margin-left: -30px;
}

.el-button:focus {
    outline: none;
}

.btn-group {
    text-align: left;
    display: flex;
    margin-left: 20px;
    margin-top: -20px;

}

:deep() .el-dialog__header {
    text-align: left;
}

.upload-excel {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}

.el-upload_download {
    margin-top: 10px;
    color: #409eff;
    cursor: pointer;
}
</style>